<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	  <!-- 4.制作4个嵌套DIV ，要求：
	  1.每个父DIV尺寸必须大于子DIV
	      2.实现每个DIV在父DIV正中间
	      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
	      4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
	      5.查找每个DIV的子元素和子节点 -->
		  <style type="text/css" >
		  	#div1{
				width:800px;
				height:800px;
				background-color: darkblue;
			    text-align: center;
			  
			}
			#div2{
				width:700px;
				height:700px;
				background-color: aqua;
				text-align: center;
				margin: 0 auto;
			}
			#div3{
				width:500px;
				height:500px;
				background-color: blueviolet;
				margin: 0 auto;
				text-align: center;
			}
			#div4{
				width:200px;
				height:200px;
				background-color: red;
				text-align: center;
				margin: 0 auto;
			}
		  </style>
		   
	</head>
	<body>
		<div id="div1">
			这是第一个div
			<div id="div2">
				这是第二个div
				<div id="div3">
					这是第三个div
					<div id="div4">
						这是第四个div
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var div4Obj= document.getElementById('div4')
		var div3Obj= document.getElementById('div3')
		var div2Obj= document.getElementById('div2')
		console.log("1级父元素为("+div4Obj.parentNode+"),"+"1级父节点为("+div4Obj.parentElement+")")
		console.log("2级父元素为("+div3Obj.parentNode+"),"+"2级父节点为("+div3Obj.parentElement+")")
		console.log("3级父元素为("+div2Obj.parentNode+"),"+"3级父节点为("+div2Obj.parentElement+")")
		var div1Ob=document.getElementById('div1')
		var div2Ob=document.getElementById('div2')
		var div3Ob=document.getElementById('div3')
		console.log("div1元素:"+div1Ob.childNodes+","+"div1节点"+div1Ob.children)
		console.log("div2元素:"+div1Ob.childNodes+","+"div2节点"+div2Ob.children)
		console.log("div3元素:"+div1Ob.childNodes+","+"div3节点"+div3Ob.children)
	</script>
</html>
